빛보다 빠른 로딩을 추구하는
프론트엔드 개발자
Portfolio
김현성
2020
생년월일
학교 / 전공
1994/04/15
중앙대학교
김현성
프로그래밍 역량
트렌디한 기술을 쫓고, 빛보다 빠른 로딩을 추구하며,
찰떡같이 소통하는 FE 개발자 김현성입니다.
꾸준히 빠르게 성장하는 개발자가 되겠습니다.
전자전기공학부
주소
경기도 광명시 사성로
123 (철산동,
롯데낙천대아파트)
1. 사용언어
Vue.js - CRUD, 로그인, 회원가입 구현 가능. Vuex, Vue-router, Vuetify 사용
Python – 백엔드로 Django 사용, 알고리즘 공부
+ JavaScript, HTML5, CSS3, Bootstrap, Django, Jquery
2. 주로 사용하는 개발환경
1) 협업 툴 : Github, JIRA, Notion
2) IDE : VScode or Webstorm
3) 웹 호스팅 : AWS
4) 서버 DB : SQLite3
외부 교육 과정
SSAFY (삼성 청년 SW 아카데미)
2020/01 ~ 2020/12
‘프로그래머로서 시작한 계기’
SSAFY는 삼성에서 개발자를 양성하기 위해 교육지원금과 양질의 프로그래밍 교육을 제공하는
아카데미 입니다. 교내 공모전에서 임산부 배려석 어플리케이션 개발을 맡은 경험으로
코딩에 관심을 갖게 되어 SSAFY에 지원하였고, 합격하여 프로그래밍을 배우게 되었습니다.
해당 교육 과정을 통해 알고리즘과 웹 개발에 대해 교육을 받았습니다.
‘SSAFY 교육 상세 내용’
교육은 주중 아침 9시부터 저녁 6시까지 1년간 진행되었습니다. 1학기엔 Python으로 알고리즘을
배우고, Django와 Vue.js를 이용해 웹 개발에 대해 배우며 전반적인 개발 지식을 다졌습니다.
7월부터 시작하는 2학기는 팀 프로젝트를 수행하는 기간으로 Git, JIRA와 같은 협업 툴을
사용하고 Jenkins, Redis와 같은 툴을 적용하여 실무 예행 연습을 할 수 있었습니다.
GITHUB 주소 :
https://github.com/gaberani
프로젝트 경험
1. TraDuler
1) 담당 분야 : 프론트엔드
2) 참여 인원 : 4명
3) 구현 사항
- 스케줄 정보를 정리해서 보여주는 4일 캘린더 컴포넌트
- Kakao 지도 API를 이용해 여행지 추가, 검색, 경로 그려주기 구현
- 유저와 관련된 기능(로그인, 로그아웃, JWT 인증, 회원가입, 마이페이지)
- Nginx를 사용해 프론트 배포
2020/10 ~ 2020/11
#Vue.js #AWS #Nginx #JavaScript #CSS
- 동행을 구할 수 있는 여행 스케줄 계획 플랫폼
https://github.com/gaberani/SSAFY-Traduler
삼성 청년 소프트웨어 아카데미 프로젝트
2. DO(Developer Oasis)
1) 담당 분야 : 프론트엔드
2) 참여 인원 : 4명
3) 구현 사항
- 게시글, 댓글, 대댓글로 각각 컴포넌트화하여 CRUD가 일어나면 그 부분만 최신화하도록 함.
- JWT를 이용해 Vuex로 유저 로그인 상태 관리
- 워드클라우드를 활용하여 인기있는 기술 스택을 소개하도록 구현
2020/08 ~ 2020/09
#Vue.js #AWS #Nginx #JavaScript #CSS
- 금전적 후원이 가능한 개발자 커뮤니티
https://github.com/DeveloperOasis
3. food2cal
1) 담당 분야 : 풀스택
2) 참여 인원 : 5명
3) 구현 사항
- 구글 음식 사진 데이터를 크롤링하는 코드 구현
- YOLO v2와 darkflow를 이용, 새로운 모델 학습과 기존 모델을 재학습시키는 투트랙 전략을 짜서
음식 사진을 인식하는 AI를 구현
- 식단 관리 특성상 유저의 체중, 키, 생활습관 등 다양한 정보를 받는 회원가입 페이지,
유저의 섭취한 식단 영양성분에 따라 차트를 보여주는 마이페이지 구현
2020/09 ~ 2020/10
#Vue.js #YOLO #Django #AWS EC2 #JavaScript #CSS
- 음식 사진을 인식해서 영양성분을 제공하는 식단 다이어리
LFS 처리 후 추가 예정(현재 SSAFY GitLab에 할당)
1. 모던바디
1) 담당 분야 : 웹 퍼블리싱, 프론트엔드 개발
2) 참여 인원: 2명
3) 구현 사항
- 부트스트랩 없이 반응형 홈페이지 제작
- 아직 많이 사용 중인 Jquery를 사용하여 UI 기능 구현
- 홈페이지의 효과적인 노출과 관리를 위한 SEO 작업
( 메타태그 작성, 구글 서치콘솔 연결, 네이버 애널리틱스 연결 등)
2020/12 ~ 2020/12
#HTML5 #CSS3 #Jquery #SEO
- 광명시 여성전용 방문PT 실사이트 제작
http://kimsuyeon.co.kr/mordern/
실제 서비스 웹사이트 제작
4. MovueHome
1) 담당 분야 : 풀스택
2) 참여 인원 : 2명
3) 구현 사항
- CSS와 부트스트랩을 이용한 메인 페이지 디자인
- 게시글, 댓글과 관련 백, 프론트 CRUD 구현
- 카드 마우스 호버 애니메이션
2020/05 ~ 2020/05
#Vue.js #YOLO #Django #AWS EC2 #JavaScript #CSS
- 사용자 데이터 기반 추천 알고리즘을 가진 영화 추천 사이트
https://github.com/gaberani/finalnetflix
TraDuler
(여행 스케줄 계획 플랫폼)
프로젝트 기간 : 2020.10 - 2020. 11
프로젝트 현황 : 비용 문제로 서버 종료
01
TraDuler(여행 스케줄 계획 플랫폼)
기 간 : 2020.10 - 2020.11
여행 플래너, 여행과 관련된 숙박, 액티비티 서비스는 있었으나 여행지를 추천받고 관련된 정보를
확인하면서 여행 코스를 짤 수 있는 서비스가 없어서 이를 직접 만들어 보기로 했습니다. 여행을 같이
가는 친구와 코스 계획을 할 수 있는 것에서 시작해 동행을 구하는 기능도 구현했습니다. 한국관광공사의
관광지 데이터, 카카오맵 API를 활용하여 관광지와 여행 경로를 표시했습니다.
개 요 : 동행을 구할 수 있는 여행 스케줄 계획 플랫폼
담 당 역 할
프론트엔드 엔지니어
개 발 환 경
Vue.js, Django(Python), AWS EC2, Nginx
구 현 사 항
1. 스케줄에 따른 4일 캘린더 컴포넌트
2. Kakao 지도 API를 이용한 여행지 경로
3. 유저와 관련된 부분(로그인, 로그아웃, JWT 인증, 회원가입, 마이페이지)
링크 |
https://github.com/gaberani/SSAFY-Traduler
DO (Developer Oasis)
(후원이 가능한 개발자 커뮤니티)
프로젝트 기간 : 2020.08 - 2020. 09
프로젝트 현황 : 비용 문제로 서버 종료
02
DO(Developer Oasis)
https://github.com/DeveloperOasis
기 간 : 2020.08 - 2020.19
양질의 글을 써준 사용자에게 후원을 할 수 있는 기능을 추가함으로써 받은 사람이 더 좋은 글을 쓰고
다른 사용자들은 계속 좋은 글을 볼 수 있는 선순환을 만들자는 목표로 제작했습니다. 개발자에게 친숙한
마크다운 에디터를 이용해 글을 쓰고 수정할 수 있게 구현했고 핫한 기술 스택이나 검색어를
워드클라우드로 제공하여 크기별로 구분할 수 있게 만들었습니다.
개 요 : 후원이 가능한 개발자 커뮤니티
담 당 역 할
프론트엔드 엔지니어
개 발 환 경
Vue.js, Spring, Bootstrap, AWS EC2, Jenkins
구 현 사 항
1. 게시글, 유저 CRUD, JWT 검증 기능 구현
2. 게시글, 댓글, 대댓글로 각각 컴포넌트화 하여 CRUD가 일어나면 그 부분만 최
신화하여 보여줌
3. 마크다운 에디터를 이용한 게시글 컴포넌트 구현
4. 워드클라우드 라이브러리를 활용하여 인기있는 키워드를 뿌려서 보여줌
Food2cal
(사진 인식 식단 다이어리)
프로젝트 기간 : 2020.09 - 2020.10
프로젝트 현황 : 비용 문제로 서버 종료
03
Food2cal (사진 인식 식단 다이어리)
기 간 : 2020.09 - 2020.10
AI로 음식 사진을 인식하면 그에 대한 대략적인 영양 성분을 받은 사용자가 몇 인분인지 입력하여 식단
다이어리에 영양성분을 쉽게 등록할 수 있도록 제작했습니다. 사용자의 활동 수준, 목표, 키와 몸무게
등을 입력받기 위한 단계별 형식과 식단 영양성분에 따라 현재 어느정도 지켜지고 있는지
마이페이지에서 체크할 수 있도록 했습니다.
개 요 : 음식 사진을 인식해서 영양성분을 제공하는 식단 다이어리
담 당 역 할
풀스택 엔지니어
개 발 환 경
Vue.js, YOLO, Django(Python), AWS EC2, Nginx, gunicorn
구 현 사 항
1. 구글 음식 사진 데이터 크롤링 코드 짜기
2. YOLO v2와 darkflow를 이용해 기존 모델에 음식 사진 데이터 재학습 시킴
3. 프론트 단에서 유저와 관련된 부분(회원가입, 로그인, 토큰 인증)
4. 마이페이지에서 식단 영양성분에 따라 차트를 보여줌.
링크 |
추후 추가 (현재 SSAFY GitLab에 할당, LFS 활용하여 올릴 예정)
MovueHome
(영화 추천 사이트)
프로젝트 기간 : 2020.05 - 2020.05
프로젝트 현황 : 비용 문제로 서버 종료
04
MovueHome (영화 추천 사이트)
기 간 : 2020.05 - 2020.05
The Movie DB에서 약 11000개의 영화에 대한 정보 데이터를 사용해 사용자 데이터를 기반으로 영화를
추천받을 수 있게 제작하였다. 2명이서 진행하는 싸피 교육 과정 1학기 마지막 프로젝트로 게시판, 댓글과
같이 배웠던 기능을 모두 활용해보고자 했다.
개 요 : 사용자 데이터 기반 추천 알고리즘을 가진 영화 추천 사이트
담 당 역 할
풀스택 엔지니어
개 발 환 경
Django(Python), Vue.js, Bootstrap, JS, CSS
구 현 사 항
1. 메인 페이지, 네비게이션 바 디자인
2. 게시판과 댓글 CRUD
3. 영화 카드 CSS 호버 애니메이션
링크 |
https://github.com/gaberani/finalnetflix
모던바디 홈PT
(방문PT 소개 사이트)
프로젝트 기간 : 2020.12 - 2020.12
프로젝트 현황 : 서비스 중
05
모던바디 홈PT (방문PT 소개 사이트)
기 간 : 2020.12 - 2020.12
실제 서비스할 사이트를 제작해보고자 지인의 방문PT 홈페이지를 제작했습니다. 원래대로라면 Vue.js를
사용하나 이번에는 아직까지 많이 사용되고 있는 HTML5, CSS3, Jquery를 사용하여 반응형으로
제작해봤습니다.
실제 상용화가 필요한 홈페이지이기에 SEO를 고려하여 메타태그를 작성하고 구글 서치콘솔, 네이버
애널리틱스를 연동하여 홈페이지 관리자가 방문 현황 통계를 보고 관리하기 편하게 했습니다.
개 요 : 광명시 여성전용 방문PT 실사이트 제작
담 당 역 할
웹 퍼블리싱, 프론트엔드 개발
개 발 환 경
HTML5, Javascript, Jquery, SEO
구 현 사 항
1. 부트스트랩 없이 반응형 페이지 제작
2. Jquery를 이용해 UI 기능 구현
3. 홈페이지의 효과적인 노출과 관리를 위한 SEO 작업
( 메타태그 작성, 구글 서치콘솔, 네이버 애널리틱스 연결 )
링크 |
http://kimsuyeon.co.kr/mordern/
